<template>
  <a-modal
    v-model:open="open"
    title="检验检查记录"
    :maskClosable="false"
    :bodyStyle="{ maxHeight: modelMaxHeight, overflow: 'hidden' }"
    :width="800"
  >
    <a-tabs v-model:activeKey="activeKey" type="card">
      <a-tab-pane key="1" tab="检验记录">
        <div :style="{ height: tabsMaxHeight, overflow: 'hidden auto' }">
          <a-empty v-if="state.testData.length == 0"></a-empty>
          <div
            class="health-box"
            v-for="(item, index) in state.testData"
            :key="index"
            style="margin-bottom: 30px"
          >
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-bottom: 10px;
              "
            >
              <span class="reportName" style="flex: 2">{{ item.testTypeName }}</span>
              <span style="flex: 1; text-align: right">检测时间：{{ item.reportTime }}</span>
            </div>
            <a-table
              :columns="state.testColums"
              :dataSource="item.testRecordDetailList"
              :pagination="false"
              size="small"
            ></a-table>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="检查记录">
        <div :style="{ height: tabsMaxHeight, overflow: 'hidden auto' }">
          <a-empty v-if="state.examData.length == 0"></a-empty>
          <div class="exam-report-box" v-for="(item, index) in state.examData" :key="index">
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-bottom: 10px;
              "
            >
              <span class="reportName" style="flex: 1">{{ item.examItemName }}</span>
              <span style="color: #4e5969; flex: 1; text-align: right"
                >检查医生:
                <span style="color: #1d2129">{{ item.reportDoctorName }}</span>
                <span style="color: #4e5969; margin-left: 30px">
                  检查时间: <span style="color: #1d2129">{{ item.executeTime || '-' }}</span>
                </span>
              </span>
            </div>
            <div class="check-title">检查描述：</div>
            <div>
              {{ item.examDesc }}
            </div>
            <div class="check-title">检查结果：</div>
            <div>
              {{ item.reference }}
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <template #footer>
      <a-button key="back" @click="open = false">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const activeKey = ref('1')
const open = ref(false)

const modelMaxHeight = ref(window.innerHeight * 0.8 - 150 + 'px')
const tabsMaxHeight = ref(window.innerHeight * 0.8 - 250 + 'px')

const state = reactive({
  testColums: [
    {
      key: 'testItemName',
      dataIndex: 'testItemName',
      align: 'left',
      title: '明细项目名称'
    },
    {
      key: 'quantitative',
      dataIndex: 'quantitative',
      align: 'left',
      title: '定量结果'
    },
    {
      key: 'qualitative',
      dataIndex: 'qualitative',
      align: 'left',
      title: '定性结果'
    },
    {
      key: 'unit',
      dataIndex: 'unit',
      align: 'left',
      title: '单位'
    },
    {
      key: 'reference',
      dataIndex: 'reference',
      align: 'left',
      title: '参考范围'
    }
  ],
  testData: [],
  examData: []
})

const init = (examList, testList) => {
  modelMaxHeight.value = window.innerHeight * 0.8 - 150 + 'px'
  tabsMaxHeight.value = window.innerHeight * 0.8 - 250 + 'px'
  activeKey.value = '1'
  open.value = true
  state.testData = testList
  state.examData = examList

  console.log(state.testData)
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.reportName {
  font-size: 16px;
  font-weight: 600;
}

.check-title {
  font-weight: 600;
  margin: 10px 0;
}

.exam-report-box {
  background: #f7f8fa;
  padding: 10px;
  margin: 0 0 30px 0;
}
</style>
